<!--component html goes here -->
<div class="padding-bottom-45">

    <div class="modal-header">
        <div class="modal-title">{{l('新增消息回复')}}</div>
    </div>

    <form nz-form #validateForm="ngForm" (ngSubmit)="save()" *ngIf="wechatMessage">
        <!-- 触发类型 -->
        <nz-form-item nz-row>
            <nz-form-label nz-col [nzSm]="5" [nzXs]="24" nzRequired nzFor="type">回复类型</nz-form-label>
            <nz-form-control nz-col [nzSm]="19" nzHasFeedback>
                <nz-select name="triggerType" #triggertype="ngModel" [(ngModel)]="wechatMessage.triggerType"
                    autocomplete="triggerType">
                    <nz-option *ngFor="let i of triggerTypes" [nzLabel]="i.text" [nzValue]="i.value">
                    </nz-option>
                </nz-select>
            </nz-form-control>
        </nz-form-item>

        <!-- 触发值-->
        <nz-form-item nz-row>
            <nz-form-label *ngIf="wechatMessage.triggerType==1" nzRequired nz-col [nzSm]="5" [nzXs]="24" nzRequired
                nzFor="author">关键字</nz-form-label>
            <nz-form-label *ngIf="wechatMessage.triggerType==2" nzRequired nz-col [nzSm]="5" [nzXs]="24" nzRequired
                nzFor="author">事件key</nz-form-label>
            <nz-form-control nz-col [nzSm]="19" nzHasFeedback>
                <input nz-input name="keyWord" #keyWord="ngModel" [(ngModel)]="wechatMessage.keyWord" maxlength="50"
                    autocomplete="keyWord" required>
                <nz-form-explain *ngIf="keyWord.control.dirty&&keyWord.control.errors">
                    <ng-container *ngIf="keyWord.control.hasError('required')">{{l('CanNotNull')}}</ng-container>
                    <ng-container *ngIf="keyWord.control.hasError('maxlength')">{{l('MaxLength')}}</ng-container>
                </nz-form-explain>
            </nz-form-control>
        </nz-form-item>

        <!-- 消息类型 -->
        <nz-form-item nz-row>
            <nz-form-label nz-col [nzSm]="5" [nzXs]="24" nzRequired nzFor="msgType">消息类型</nz-form-label>
            <nz-form-control nz-col [nzSm]="19" nzHasFeedback>
                <nz-radio-group name="msgType" #msgType="ngModel" [(ngModel)]="wechatMessage.msgType"
                    autocomplete="msgType" class="mb-md">
                    <label nz-radio *ngFor="let o of msgTypes" [nzValue]="o.value">
                        <span>{{o.text}}</span>
                    </label>
                </nz-radio-group>
                <nz-form-explain *ngIf="msgType.control.dirty&&msgType.control.errors">
                    <ng-container *ngIf="msgType.control.hasError('required')">{{l('CanNotNull')}}</ng-container>
                </nz-form-explain>
            </nz-form-control>
        </nz-form-item>

        <!-- 回复内容 -->
        <nz-form-item *ngIf="wechatMessage.msgType==1" nz-row>
            <nz-form-label [nzSm]="5" [nzXs]="24" nzRequired nzFor="content">回复内容</nz-form-label>
            <nz-form-control [nzSm]="19">
                <textarea nz-input name="content" #content="ngModel" [(ngModel)]="wechatMessage.content" maxlength="200"
                    rows="6" autocomplete="content" [nzAutosize]="{ minRows: 6, maxRows: 10}" required></textarea>
                <nz-form-explain *ngIf="content.control.dirty&&content.control.errors">
                    <ng-container *ngIf="content.control.hasError('required')">{{l('CanNotNull')}}</ng-container>
                    <ng-container *ngIf="content.control.hasError('maxlength')">{{l('MaxLength')}}</ng-container>
                </nz-form-explain>
            </nz-form-control>
        </nz-form-item>

        <div *ngIf="wechatMessage.msgType==2">
            <!-- 标题 -->
            <nz-form-item nz-row>
                <nz-form-label nz-col [nzSm]="5" [nzXs]="24" nzRequired nzFor="title">标题</nz-form-label>
                <nz-form-control nz-col [nzSm]="19" nzHasFeedback>
                    <input nz-input name="title" #title="ngModel" [(ngModel)]="wechatMessage.title" autocomplete="title"
                        maxlength="200" required>
                    <nz-form-explain *ngIf="title.control.dirty&&title.control.errors">
                        <ng-container *ngIf="title.control.hasError('required')">{{l('CanNotNull')}}</ng-container>
                        <ng-container *ngIf="title.control.hasError('maxlength')">{{l('MaxLength')}}</ng-container>
                    </nz-form-explain>
                </nz-form-control>
            </nz-form-item>


            <!-- 图片链接 -->
            <nz-form-item nz-row>
                <nz-form-label nz-col [nzSm]="5" [nzXs]="24" nzRequired nzFor="picLink">图片链接</nz-form-label>
                <nz-form-control nz-col [nzSm]="19" nzHasFeedback>
                    <input nz-input name="picLink" #picLink="ngModel" [(ngModel)]="wechatMessage.picLink"
                        autocomplete="picLink" maxlength="200" required>
                    <nz-form-explain *ngIf="picLink.control.dirty&&picLink.control.errors">
                        <ng-container *ngIf="picLink.control.hasError('required')">{{l('CanNotNull')}}</ng-container>
                        <ng-container *ngIf="picLink.control.hasError('maxlength')">{{l('MaxLength')}}</ng-container>
                    </nz-form-explain>
                </nz-form-control>
            </nz-form-item>
            <!-- 文章链接 -->
            <nz-form-item nz-row>
                <nz-form-label nz-col [nzSm]="5" [nzXs]="24" nzRequired nzFor="url">文章链接</nz-form-label>
                <nz-form-control nz-col [nzSm]="19" nzHasFeedback>
                    <input nz-input name="url" #url="ngModel" [(ngModel)]="wechatMessage.url" autocomplete="url"
                        maxlength="200" required>
                    <nz-form-explain *ngIf="url.control.dirty&&url.control.errors">
                        <ng-container *ngIf="url.control.hasError('required')">{{l('CanNotNull')}}</ng-container>
                        <ng-container *ngIf="url.control.hasError('maxlength')">{{l('MaxLength')}}</ng-container>
                    </nz-form-explain>
                </nz-form-control>
            </nz-form-item>

            <!-- 描述 -->
            <nz-form-item nz-row>
                <nz-form-label nz-col [nzSm]="5" [nzXs]="24" nzRequired nzFor="desc">描述</nz-form-label>
                <nz-form-control nz-col [nzSm]="19" nzHasFeedback>
                    <textarea nz-input name="desc" #desc="ngModel" [(ngModel)]="wechatMessage.desc" autocomplete="desc"
                        maxlength="200" required [nzAutosize]="{ minRows: 3, maxRows: 6 }"></textarea>
                    <nz-form-explain *ngIf="desc.control.dirty&&desc.control.errors">
                        <ng-container *ngIf="desc.control.hasError('required')">{{l('CanNotNull')}}</ng-container>
                        <ng-container *ngIf="desc.control.hasError('maxlength')">{{l('MaxLength')}}</ng-container>
                    </nz-form-explain>
                </nz-form-control>
            </nz-form-item>
        </div>


        <!-- 功能按钮 -->
        <div class="modal-footer">
            <button nz-button type="button" [disabled]="saving" (click)="close()">
                取消
            </button>
            <button nz-button [nzType]="'primary'" type="submit" [disabled]="!validateForm.valid||saving">
                保存
            </button>
        </div>

    </form>
</div>